<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>受控组件</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入react核心库  优先 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom用于支持react操作DOM，依赖react核心库 -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转换为js -->
    <script type="text/javascript" src="../js//babel.min.js"></script>
    <script type="text/babel">
      //    这节课学完整的生命周期函数（旧） ：

      class Count extends React.Component {
        //生命周期先执行构造器 constructor(){}
        constructor(props) {
          super(props);
          console.log("Count执行构造器constructor--------111");
        }
        //生命周期----componentWillMount(){} 组件将要挂载
        UNSAFE_componentWillMount() {
          console.log("Count组件将要挂载----componentWillMount(){}--------222");
        }
        //生命周期----componentDidMount(){} 组件挂载完成
        componentDidMount() {
          console.log("Count组件挂载完成----componentDidMount(){}--------444");
        }
        state = { count: 1 };
        add = () => {
          this.setState({
            count: this.state.count + 1,
          });
        };

        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };
        // 强制更新----forceUpdate(){} 强制更新
        force = () => {
          this.forceUpdate();
          console.log("强制更新组件");
        };
        //生命周期----componentWillUnmount(){} 组件卸载之前
        componentWillUnmount() {
          console.log(
            "Count组件卸载之前----componentWillUnmount(){}--------555"
          );
        }
        //生命周期----shouldComponentUpdate(){} 组件是否要更新(控制组件更新的阀门 通过返回布尔值决定)
        shouldComponentUpdate() {
          console.log(
            "Count组件是否要更新----shouldComponentUpdate(){}--------666"
          );
          return false; //返回true允许更新，返回false不允许更新
          //返回false后，componentWillUpdate(){}和componentDidUpdate(){}
          // 都不会执行，但是可以使用forceUpdate(){}强制更新
        }
        //生命周期----componentWillUpdate(){} 组件将要更新
        UNSAFE_componentWillUpdate() {
          console.log(
            "Count组件将要更新----componentWillUpdate(){}--------777"
          );
        }
        //生命周期----componentDidUpdate(){} 组件更新完成
        componentDidUpdate() {
          console.log("Count组件更新完成----componentDidUpdate(){}--------888");
        }
        render() {
          console.log("Count渲染render(){}  贯穿挂载和更新--------333");
          return (
            <div>
              <h2>当前的计数是：{this.state.count}</h2>
              <button onClick={this.add}>add</button>
              <button onClick={this.death}>卸载组件</button>
              <button onClick={this.force}>不更改数据，强制更新</button>
            </div>
          );
        }
      }

      class A extends React.Component {
        state = { carName: "迈腾" };
        changeCar = () => {
          this.setState({
            carName: this.state.carName == "迈腾" ? "保时捷" : "迈腾",
          });
        };
        render() {
          return (
            <div>
              <div>我是AA组件</div>
              <button onClick={this.changeCar}>换车</button>
              <B carName={this.state.carName} />
            </div>
          );
        }
      }
      class B extends React.Component {
        UNSAFE_componentWillReceiveProps(nextProps) {
          //有一个坑  第一次传的不算!!!!!
          console.log(
            "B子组件---componentWillReceiveProps(){}",
            "有一个坑  第一次传的不算!!!!",
            nextProps
          );
        }
        render() {
          console.log("B子组件---render(){}");
          return (
            <div>
              <div>我是BB组件---我接受到的车是{this.props.carName}</div>
            </div>
          );
        }
      }
      ReactDOM.render(<A />, document.getElementById("test"));
    </script>
  </body>
</html>
